<template>
  <div id="orderlist">
    <h1>订单列表</h1>
    <el-table :data="allOrders" border style="width: 100%">
      <el-table-column
        fixed
        prop="_id"
        label="编号"
        width="150"
      ></el-table-column>
      <el-table-column prop="usersId.name" label="客户姓名" width="120">
      </el-table-column>
      <el-table-column prop="personalId.names" label="负责销售" width="120">
      </el-table-column>
      <el-table-column prop="orderTime" label="订单时间" width="120">
      </el-table-column>
      <el-table-column prop="insuresId.name" label="保险产品" width="120">
      </el-table-column>

      <el-table-column label="订单状态">
        <template slot-scope="scope">
          <label>{{ ordersState(scope.row.orderState) }}</label>
        </template>
      </el-table-column>
      <el-table-column label="保单状态">
        <template slot-scope="scope">
          <label>{{cancellations(scope.row.cancellation) }}</label>
        </template>
      </el-table-column>
      

      <el-table-column prop="insuresId.payType" label="缴费类型" width="120">
      </el-table-column>
      <el-table-column
        prop="insuresId.suitableFor"
        label="保险对象"
        width="120"
      >
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
        

          <el-button
            size="medium"
            type="danger"
            @click="handleDelete(scope.$index, scope.row._id)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page.currentPage"
        :page-sizes="[3, 5, 7, 9]"
        :page-size="pages.totalPages"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pages.total"
      >
      </el-pagination>
    </div>
  </div>
</template>


<script>
import { createNamespacedHelpers } from "vuex";
const { mapState, mapActions, mapMutations } = createNamespacedHelpers(
  "orders"
);

export default {
  data() {
    return {
      page: {
        pageSize: 5, //每页显示条数
        currentPage: 1, //当前页
        total: 0, //总条数
        pageTotal: 0, //总页数
      },
      orderLis: [],
      dialogTableVisible: false,
      dialogFormVisible: false,
      formLabelWidth: "120px",
    };
  },
  methods: {
    ...mapActions(["getAllOrders", "delOrdersById", "getOneOrderById", "_id"]),
    ...mapMutations(["changeAllOrders"]),
    ordersState(data) {
      switch (data) {
        case 1:
          return "待支付";
          break;
        case 2:
          return "已支付";
          break;
        case 3:
          return "已取消";
          break;
      }
    },
       cancellations(data) {
      switch (data) {
        case 0:
          return "正常";
          break;
        case 1:
          return "等待管理员审核退保中";
          break;
        case 2:
          return "退保成功";
          break;
        case 3:
          return "退保失败";
          break;
        case 4:
          return "客户申请退保中";
          break;
      }
    },
    handleClick(index, row) {
      this.getOneOrderById(row);
      this.dialogFormVisible = true;
      //console.log(index, row, "ooop");
    },
    handleEdit(index, row) {
      console.log(index, row);
    },
    handleDelete($index, row) {
      // console.log($index, row);
      this.delOrdersById(row);
      this.getAllOrders();
    },
    //
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.pages.pageSize = val;
      this.getAllOrders(this.pages.pageSize);
    },
    //
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.pages.currentPage = val;
      this.getAllOrders(this.pages.currentPage);
    },
  },
  computed: {
    ...mapState([
      "allOrders",
      "pages",
      "orderState",
      "cancellation",
      "insuresId",
      "orderTime",
      "usersId",
      "orderData",
    ]),
  },
  created() {
    this.getAllOrders();
  },
  // mounted() {
  //   console.log("FFF", this.allOrders);
  //   console.log("aaa", this.orderData);
  // },
};
</script>

<style lang="scss" >
#orderlist {
  .el-table .cell {
    text-align: center;
  }
  .el-pagination {
    margin-top: 20px;
  }
  .el-button--medium {
    margin-left: 10px;
  }
  .el-button--primary {
    width: 50px;
    margin-left: 10px;
  }
}
</style>